<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chart-track-list.html">
<link rel="import" href="../ref-object/ref-object.html">
<link rel="import" href="../ref-embedded-behavior/ref-embedded-behavior.html">
<link rel="import" href="../genemo-styles.html">
<link rel="import" href="../genemo-tab-card-content-behavior/genemo-tab-card-content-behavior.html">
<link rel="import" href="../genemo-track-filter/genemo-track-filter.html">
<link href="https://fonts.googleapis.com/css?family=Roboto:500,400italic,700italic,700,400" rel="stylesheet" type="text/css">
<dom-module id="chart-track-group-list">
  <template>
    <style include="genemo-shared-styles iron-flex" is="custom-style">
    :host {
      padding: 0.5em;
      display: block;
      @apply(--layout-fit);
      @apply(--layout-vertical);
    }
    chart-track-list {
      @apply(--chart-track-list-items-mixin);
    }
    .cardActions {
      padding: 0;
      margin-bottom: -0.5em;
    }
    </style>
    <template is="dom-repeat" id="trackGroupBlock"
      items="[[groupArray]]" as="group">
      <!-- this is the track group DOM -->
      <chart-track-list text-size="[[textSize]]" group="[[group]]"
        setting-key="[[settingKey]]" class="flex"
        instant-change="[[instantChange]]">
      </chart-track-list>
    </template>
    <div class="cardActions">
      <template is="dom-if" if="[[withFilter]]" restamp="true">
        <paper-button on-tap="launchFilter">
          <iron-icon icon="filter-list"></iron-icon>
          Filter
        </paper-button>
        <paper-button on-tap="resetAllTracks">
          <iron-icon icon="refresh"></iron-icon>
          Reset to default
        </paper-button>
        <genemo-track-filter id="trackFilter" ref='[[ref]]'
          on-filter-tracks="_filterTracksHandler"></genemo-track-filter>
      </template>
      <template is="dom-if" if="[[hasControls]]" restamp="true">
        <paper-button on-tap="cancelChanges">
          <iron-icon icon="close"></iron-icon>
          Cancel
        </paper-button>
        <paper-button on-tap="submitChanges">
          <iron-icon icon="check"></iron-icon>
          OK
        </paper-button>
      </template>
    </div>
  </template>
  <script>
    var GIVe = (function (give) {
      'use strict'

      give.ChartTrackGroupList = Polymer({
        is: 'chart-track-group-list',

        behaviors: [
          give.GenemoTabCardContentBehavior,
          give.RefEmbeddedBehavior
        ],

        properties: {
          textSize: {
            type: Number,
            value: 12    // unit is px
          },

          settingKey: {
            type: String,
            value: give.GENEMO_SELECTED_KEY
          },

          groupArray: {
            type: Array,
            value: function () {
              return []
            }
          },

          groupIdList: {
            // this is the array of allowed group IDs in the list
            type: Array
          },

          defaultTrackIdList: {
            type: Array,
            value: function () {
              return []
            }
          },

          /**
           * Whether the track controller will support filter function
           * @type {boolean}
           */
          withFilter: {
            type: Boolean,
            value: false
          },

          /**
           * Whether the track controller will reflect change immediately
           * without calling this.DOMToTrack().
           * This is always false if hasControls === true
           * @type {boolean}
           */
          instantChange: {
            type: Boolean,
            value: false
          },

          /**
           * Whether the track controller will show OK/Cancel controls
           * @type {boolean}
           */
          hasControls: {
            type: Boolean,
            value: false
          }
        },

        ready: function () {
          this._setIcon('view-list')
          this._setIconAlt('Track list')
          this._setHeaderText('Track list')
          this._setTabText('Tracks')

          this.setDOMReady(true)
          this.setReady(false)

          this.completedRepeatDOMs = 0

          if (this.defaultTrackIdList.length > 0) {
            this._needOverrideDefault = true
          }
        },

        /**
         * _overrideTrackDefaultSettings - Override the default track settings
         */
        _overrideTrackDefaultSettings: function () {
          if (this._refObj && this.defaultTrackIdList.length > 0) {
            this._refObj.setTrackSettings(this.settingKey, false, null)
            this.defaultTrackIdList.forEach(function (id) {
              try {
                this._refObj.getTracks().get(id).setSetting(this.settingKey, true)
              } catch (e) {
                give._verboseConsole('Track `' + id + '` does not exist!',
                  give.VERBOSE_WARNING)
              }
            }, this)
          }
        },

        _refreshRefTrackReady: function () {
          // this is called after track is ready for trackRef
          if (this._needOverrideDefault) {
            this._overrideTrackDefaultSettings()
            delete this._needOverrideDefault
          } else {
            // reference has changed, no need to override anymore
            this.splice('defaultTrackIdList', 0, this.defaultTrackIdList.length)
          }

          this.splice('groupArray', 0, this.groupArray.length)
          if (this.groupIdList && this.groupIdList.length > 0) {
            this.groupIdList.forEach(function (groupID) {
              if (this._refObj.getGroups().hasOwnProperty(groupID)) {
                this.push('groupArray', this._refObj.getGroups()[groupID])
              }
            }, this)
          } else {
            for (var key in this._refObj.getGroups()) {
              if (this._refObj.getGroups().hasOwnProperty(key)) {
                this.push('groupArray', this._refObj.getGroups()[key])
              }
            }
          }
          this.async(function () {
            this.trackToDOM(true)
            this.setReady(true)
          })
        },

        _refreshRef: function () {
          this._refObj.callOnTracksReady(this._refreshRefTrackReady.bind(this))
        },

        updateAllGroupDOM: function () {
          this.setReady(false)
          this._refreshRef()
        },

        _prioritySort: function (itemA, itemB) {
          return itemA.priority < itemB.priority
            ? -1 : (itemA.priority > itemB.priority ? 1 : 0)
        },

        /**
         * Set the reference to new reference
         *
         * this will reset all tracks and redo the ref
         * note that the tracks should already be initialized before switching here
         *
         * @param  {string|GIVe.RefObject} newRef - New Reference, either name or GIVe.RefObject
         */
        _setRefObj: function (refObj) {
          // TODO: may need to add something to remove the override array
          this._refObj = refObj
          this.setReady(false)
          if (this._refObj) {
            this._refreshRef()
          }
        },

        trackToDOM: function (scrollToSelected) {
          // this is used when resetting selection
          Polymer.dom(this.root).querySelectorAll('chart-track-list').forEach(function (elem) {
            elem.trackToDOM(scrollToSelected)
          }, this)
        },

        DOMToTrack: function () {
          // this is used when submitting the results
          Polymer.dom(this.root).querySelectorAll('chart-track-list').forEach(function (elem) {
            elem.DOMToTrack()
          }, this)
        },

        resetAllTracks: function () {
          Polymer.dom(this.root).querySelectorAll('chart-track-list').forEach(function (elem) {
            elem.resetAllTracks()
          }, this)

          // override default values if needed
          this._overrideTrackDefaultSettings()
        },

        backToSearch: function () {
          this.fire('switch-page', {selectedPageID: give.SEARCH_PANEL_DOM_ID})
        },

        /**
         * launchFilter - Show track filter element
         */
        launchFilter: function () {
          if (this.$$('#trackFilter')) {
            this.$$('#trackFilter').show()
          }
        },

        /**
         * _filterTracksHandler - Event handler to filter the track
         *
         * @param  {Object} e - event from the track filter element
         */
        _filterTracksHandler: function (e) {
          if (!e.detail.targetId || e.detail.targetId === this.id) {
            e.stopPropagation()
            this.applyFilter(e.detail.map, e.detail.flags)
          }
          // Otherwise the filter wants to change some other list (extremely rare),
          // when whoever listens to filter-tracks event will handle.
        },

        submitChanges: function () {
          this.DOMToTrack()
          this.backToSearch()
        },

        cancelChanges: function () {
          this.trackToDOM()
          this.backToSearch()
        },

        applyFilter: function (map, flags) {
          var domList = Polymer.dom(this.root).querySelectorAll('chart-track-list')
          give.forEach(domList, function (elem) {
            elem.applyFilter(map, flags)
          }, this)
        }
      })

      return give
    })(GIVe || {})
  </script>
</dom-module>
